<template>
	<view>
		<u-sticky bgColor="#6492FF" offsetTop=0 customNavHeight=0>
			<navbox title="提交凭证" btn='历史凭证' @rightH="navto('/pages/my/order?productId='+productId+'&current=0')">
			</navbox>
		</u-sticky>
		<view class="con">
			<view class="con__box" v-for="(item,index) in list" :key="index">
				<view class="con__box__title">
					填写申请信息
				</view>
				<view class="u-flex u-flex-y-center u-flex-between bb1">
					<view class="con__box__text">
						用户姓名
					</view>
					<input type="text" class="con__box__value" v-model="item.name" placeholder="请输入姓名" />
				</view>
				<view class="u-flex u-flex-y-center u-flex-between bb1">
					<view class="con__box__text">
						手机号
					</view>
					<input @input="input(item.tel,index)" type="number" maxlength="11" class="con__box__value"
						v-model='item.tel' placeholder="请输入手机号" />
				</view>
				<view class="u-flex u-flex-y-center u-flex-between bb1">
					<view class="con__box__text">
						推广员
					</view>
					<view class="con__box__value" @click="show = true,curitem=index">
						{{item.applyName?item.applyName:'选择推广员>'}}
					</view>
				</view>
				<view class="u-flex u-flex-y-center u-flex-between bb1" v-for="(item1,index1) in item.extend"
					:key="index1">
					<view class="con__box__text">
						{{item1.name}}
					</view>
					<input type="number" v-model="item1.val" class="con__box__value" :placeholder="'请输入'+item1.name" />
				</view>
				<view class="con__box__text" v-if="item.img.length>0">
					相关截图
				</view>
				<view class="u-flex u-flex-y-center" v-if="item.img.length>0">
					<view class="" v-for="(item1,index1) in item.img" :key="index1" @click="upimg(index,index1)">
						<view class="con__box__up" v-if="!item1">
							<image src="/static/img/home/up.png" class="con__box__up__bg" mode=""></image>
						</view>
						<image class="con__box__up" :src="item1" v-else mode="aspectFill"></image>

					</view>

				</view>
				<!-- 删除按钮 -->
				<view class="con__box__del" v-if="list.length>1" @click="del(index)">
					<u-button text="删除" size="mini" shape='circle' color="#6492FF" plain></u-button>
				</view>
			</view>
			<!-- 添加按钮 -->
			<view class="footer">
				<view class="con__btn" @click="add">
					再加一条
				</view>
			</view>

			<!-- 申请按钮 -->
			<view class="submit">
				<u-button text="立即提交" size="large" color="#6492FF" @click="submit"></u-button>
			</view>
		</view>
		<!-- 推广员弹框 -->
		<u-popup :show="show" @open="getapplyList" @close="show=false">
			<view class="popbox">
				<view class="popbox__top">
					<view class="popbox__top__text" @click="show=false">
						取消
					</view>
					<input type="text" class="popbox__top__inp" placeholder="请输入姓名或手机号" v-model="applykeyWord" />
					<view class="popbox__top__text" @click="getapplyList">
						搜索
					</view>
				</view>
				<scroll-view scroll-y="true" class="popbox__sc">
					<view class="popbox__sc__list" v-if="listapply.length>0">
						<view class="popbox__sc__item" v-for="(item,index) in listapply" @click="checkapply(item)"
							:key="index">
							<view class="popbox__sc__item__text">
								{{item.name}}:{{item.tel}}
							</view>
							<view class="popbox__sc__item__check">
								<image v-if="item.ischeck" class="popbox__sc__item__check__icon"
									src="/static/img/my/check.png" mode=""></image>
								<image v-else class="popbox__sc__item__check__icon" src="/static/img/my/nocheck.png"
									mode=""></image>
							</view>
						</view>
					</view>
					<u-empty mode="data" v-else icon='/static/img/index/empty.png'></u-empty>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		product,
		order,
		applyList,
		orderJudge
	} from '@/api/home.js'
	export default {
		data() {
			return {
				show: false,
				productId: 0,
				curitem: 0,
				listapply: [],
				list: [{
					name: '',
					tel: '',
					img: [],
					extend: [],
					productId: '',
					applyName: ''
				}, ],
				orderExtend: '',
				extendlist: [],
				img: '',
				images: [],
				isok: true,
				applykeyWord: '',
				product: ''
			};
		},
		methods: {
			add() {
				this.list.push({
					name: '',
					tel: '',
					applyName: '',
					img: this.images,
					extend: JSON.parse(JSON.stringify(this.extendlist)),
					productId: this.productId,
				})
			},
			getapplyList() {
				// this.listapply=[{applyName:'张',applyTel:18281623367},{applyName:'李',applyTel:18281623367},]
				// applyList({
				// 	keyWord: this.applykeyWord,
				// 	productId: this.productId
				// }).then(res => {
				// 	if (res.data.code == 200) {
				// 		this.listapply = res.data.data
				// 	}
				// })
				// this.listapply.map(t => {
				// 	t.ischeck = false
				// })
				let data = {
					keyWord: this.applykeyWord,
					productId: this.productId
				}
				uni.uploadFile({
					url: this.$BASE_URL + '/app/apply/applyList',
					filePath: '123', // 随便填，不为空即可  
					name: '123', // 随便填，不为空即可  
					header: { // "Bearer " +  Authorization
						"Authorization": uni.getStorageSync('ytbtoken') || ""
					},
					formData: data, // 接口参数，json格式，底层自动转为FormData的格式数据  
					complete: (res) => {
						console.error(res);
					}
				})
			},
			checkapply(item) {
				this.list[this.curitem].applyName = item.name
				this.list[this.curitem].applyTel = item.tel
				this.show = false
			},
			del(index) {
				// console.log(index)
				this.list.splice(index, 1)
				this.$forceUpdate()
			},
			upimg(index, index1) {
				let _this = this
				// console..log
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
							title: '上传中'
						})
						uni.uploadFile({
							url: _this.$BASE_URL + '/app/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								Authorization: uni.getStorageSync('ytbtoken')
							},
							success: (uploadFileRes) => {
								if (JSON.parse(uploadFileRes.data).code == 200) {
									uni.hideLoading()
									_this.list[index].img[index1] = JSON.parse(uploadFileRes.data)
										.data.url
									_this.$forceUpdate()
								}
							}
						});
					}
				});
			},
			submit() {
				this.isok = true
				let form = new Array(this.list.length)
				let q = []
				this.list.map((t, i) => {
					t.images = t.img.join(',')
					form[i] = t
				})
				for (let i = 0; i < form.length; i++) {
					let t = form[i]
					for (let j = 0; j < form[i].extend.length; j++) {
						if (!form[i].extend[j].val) {
							this.$u.toast(form[i].extend[j].name + '不能为空');
							this.isok = false
							break;
						}
					}
					if (!this.isok) {
						break
					}
					if (!form[i].name) {
						this.$u.toast('未填写姓名')
						this.isok = false
						break
					}
					if (form[i].tel.length < 11) {
						this.$u.toast('手机号有误')
						this.isok = false
						break
					}

					if (!form[i].applyName) {
						this.$u.toast('未选择推广员')
						this.isok = false
						break
					}
					// 判断是需要截图
					let num = 0
					form[i].img.map(t1 => {
						if (t1) {
							num++
						}
					})

					if (num < this.images.length) {
						this.$u.toast('必须上传' + this.images.length + '张截图!')
						this.isok = false
						break
					}



					this.isok = true
					q.push({
						"applyTel": t.applyTel,
						"applyName": t.applyName,
						"extend": JSON.stringify(t.extend),
						"images": t.images,
						"name": t.name,
						"productId": this.productId,
						"tel": t.tel,
						"product": this.product
					})
				}
				if (this.checkSame(form, 'tel')) {
					// 有重复
					this.$u.toast('第' + (this.checkSame(form) + 1) + '条信息的手机号与之前的手机号相同，请检查！')
					return
				}
				if (this.isok) {
					// console.log(q)
					// 提交
					order(q).then(res => {
						console.log(res)
						if (res.data.code == 200) {
							this.$u.toast('提交成功')
							setTimeout(() => {
								uni.navigateBack()
							}, 2000)
						}
					})
				}

			},
			input(item, index) {
				if (item.length == 11) {
					// 校验推广码
					orderJudge({
						productId: this.productId,
						tel: item
					}).then(res => {
						if (res.data.code == 200) {

						} else {
							this.list[index].tel = ''
							this.$u.toast(res.data.msg)
						}
					})
				}
			}
		},
		onLoad(option) {
			this.productId = option.id
			product(option.id).then(res => {
				if (res.data.code == 200) {
					this.product = res.data.data.name
					this.orderExtend = res.data.data.orderExtend
					this.orderExtend.split(',').map(t => {
						this.extendlist.push({
							name: t,
							val: ''
						})
					})
					this.extendlist.map((t, i) => {
						if (!t.name) {
							this.extendlist.splice(i, 1)
						}
					})
					this.list[0].extend = JSON.parse(JSON.stringify(this.extendlist))
					let img = ''
					if (!res.data.data.sampleImg) {
						img = ''
					} else {
						img = res.data.data.sampleImg
					}
					this.images = new Array(img.split(',').length - 1)
					this.list[0].img = JSON.parse(JSON.stringify(this.images))
					this.list[0].productId = this.productId

				}
			})
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}

	.con {
		padding: 25rpx 16rpx 200rpx;

		&__box {
			margin-bottom: 25rpx;
			background: #FFFFFF;
			border-radius: 14rpx;
			padding: 0 40rpx 20rpx;
			position: relative;

			&__title {
				font-family: Source Han Sans SC;
				font-weight: bold;
				font-size: 33rpx;
				color: #3E3D3D;
				line-height: 33rpx;
				padding: 30rpx 0 20rpx;
			}

			&__text {
				font-family: Source Han Sans SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #3E3D3D;
				line-height: 72rpx;
				margin-right: 40rpx;
			}

			&__value {
				font-family: Source Han Sans SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #707070;
				line-height: 72rpx;
				text-align: right;
				flex: 1;
			}

			&__up {
				width: 115rpx;
				height: 115rpx;
				background: #F6F6F6;
				border: 1px dashed rgba(112, 112, 112, .5);
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 16rpx;

				&__bg {
					width: 25rpx;
					height: 25rpx;

				}
			}

			&__del {
				position: absolute;
				top: 30rpx;
				right: 46rpx;
			}
		}

		&__btn {
			width: 515rpx;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			border: 1px solid rgba(100, 146, 255, .5);
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: Source Han Sans SC;
			font-weight: 400;
			font-size: 25rpx;
			color: #6492FF;
		}

		.footer {
			display: flex;
			justify-content: center;
		}

	}

	.bb1 {
		border-bottom: 1rpx solid rgba(205, 205, 205, .5);
	}

	.submit {
		position: fixed;
		width: 750rpx;
		bottom: 0;
		left: 0;
	}

	.popbox {
		height: 500rpx;

		&__top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 25rpx 40rpx;
			font-size: 30rpx;

			&__inp {
				height: 50rpx;
				line-height: 50rpx;
				border: 1rpx solid #d2d2d2;
				border-radius: 25rpx;
				padding: 0 20rpx;
			}
		}

		&__sc {
			height: 500rpx - 50rpx;

			&__list {
				padding: 20rpx 40rpx;
			}

			&__item {
				padding: 20rpx 0;
				display: flex;
				align-items: center;

				&__text {
					width: calc(100% - 30rpx);
					text-align: center;
				}

				&__check {
					width: 30rpx;
					height: 30rpx;

					&__icon {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}

	}
</style>